import React, {useEffect, useState} from 'react';
import FunChildren from '@/components/10- useEffect/FunChildren'

function App(props) {
    /**
     * 概念：受控组件和非受控组件指的都是表单元素
     * 一旦受控，表单元素变为只读的，用户输入不可修改。如果想让用户可以输入，需要添加onChange事件，
     * 在事件回调中，获取用户最新的输入，用来给状态赋值。
     * type='text' ：通过value进行受控
     * type='radio' : 通过 checked 进行受控
     * type='checkbox' ： 通过 checked 进行受控
     *
     * 非受控组件：
     *  表单元素的value或checked值，不受到状态数据的控制
     *  将状态数据渲染到表单中，使用 defaultValue 、defaultChecked
     *  获取用户最新的输入，通过ref对象获取
     */
    let [formData, setFormData] = useState({
        userName: "张三",
        passWord: "123456",
        city: "2",
        sex: "女",
        hobbies: {
            study: false,
            swim: false,
            tea: false,
            chess: false,
        },
    });
    const formChange = (e) => {
        const {name, value, type, checked} = e.target;
        if (type === 'checkbox') {
            // 处理复选框
            setFormData({
                ...formData,
                hobbies: {
                    ...formData.hobbies,
                    [name]: checked,
                },
            });
        } else {
            // 处理其他表单元素
            setFormData({
                ...formData,
                [name]: value,
            });
        }
    }
    return (
        <div>
            {/*
                受控组件
             */}
            <form>
                <p>用户名：<input onChange={formChange} value={formData.userName} name='userName' type="text"/></p>
                <p>密码：<input onChange={formChange} name='passWord' type="text"/></p>
                <p>城市：
                    <select onChange={formChange} name='city' value={formData.city}>
                        <option value="1">上海</option>
                        <option value="2">北京</option>
                        <option value="3">成都</option>
                        <option value="4">武汉</option>
                        <option value="5">西安</option>
                        <option value="6">深圳</option>
                        <option value="7">南白滩</option>
                    </select>
                </p>
                <p>
                    性别：
                    <input onChange={formChange} checked={formData.sex === '男'} value='男' name="sex"
                           type="radio"/>男 ==> {formData.sex}
                    <input onChange={formChange} checked={formData.sex === '女'} value='女' name="sex"
                           type="radio"/>女 ==> {formData.sex}
                </p>
                <div>
                    爱好：
                    <div>
                        <input onChange={formChange} checked={formData.hobbies.study} type="checkbox" name={"study"}/>学习
                        <input onChange={formChange} checked={formData.hobbies.swim} type="checkbox" name={"swim"}/>游泳
                        <input onChange={formChange} checked={formData.hobbies.tea} type="checkbox" name={"tea"}/>品茗
                        <input onChange={formChange} checked={formData.hobbies.chess} type="checkbox" name={"chess"}/>下棋
                    </div>
                </div>
                <button>提交</button>
            </form>
        </div>
    );
}

export default App;